<template>
  <div class="goods-warp">
    <div class="goods-content clear">
      <div class="list">
        <div class="one clear">
          <div class="one-left">
            <div id="u5">
              <img src="../../../assets/images/u5.png" />
              <div id="u5-text">
                <span style="font-family: '微软雅黑'; font-weight: 400"
                  >基本信息</span
                >
              </div>
            </div>
          </div>
          <div class="one-right">
            <el-form
              :inline="true"
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              :rules="rules"
              status-icon
            >
              <el-form-item label="厂商名称:" prop="factory">
                <el-select v-model="ruleForm.factory" placeholder="请选择厂商">
                  <el-option
                    v-for="(item, index) in selected"
                    :key="index"
                    :label="item.label"
                    :value="item.factory"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品品牌:" prop="brandName">
                <el-select v-model="ruleForm.brand" placeholder="请选择品牌">
                  <el-option
                    v-for="item in selected"
                    :key="item.value"
                    :label="item.label"
                    :value="item.brandName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品类型:" prop="goodsType">
                <el-select v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in selected"
                    :key="item.value"
                    :label="item.label"
                    :value="item.goodsType"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品名称:" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  placeholder="输入名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="商品描述:" prop="describe">
                <el-input
                  type="textarea"
                  v-model="ruleForm.describe"
                  style="width: 420px"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="one clear">
          <div class="one-left">
            <div id="u5">
              <img src="../../../assets/images/u5.png" />
              <div id="u5-text">
                <span style="font-family: '微软雅黑'; font-weight: 400"
                  >规格信息</span
                >
              </div>
            </div>
          </div>
          <div class="one-right">
            <el-form
              :inline="true"
              :model="ruleForm1"
              ref="ruleForm1"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="单位:" prop="bigUnit">
                <el-select v-model="ruleForm1.bigUnit" placeholder="请选择单位">
                  <el-option
                    v-for="(item, index) in selec"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="规格:" prop="norms">
                <el-input
                  v-model="ruleForm1.norms"
                  style="width: 220px"
                  placeholder="请输入规格"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="one clear">
          <div class="one-left">
            <div id="u5">
              <img src="../../../assets/images/u5.png" />
              <div id="u5-text">
                <span style="font-family: '微软雅黑'; font-weight: 400"
                  >商品价格</span
                >
              </div>
            </div>
          </div>
          <div class="one-right">
            <el-form
              :inline="true"
              :model="ruleForm2"
              ref="ruleForm2"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="成本价格:" prop="costPrice">
                <el-input
                  v-model="ruleForm2.costPrice"
                  style="width: 220px"
                  placeholder="请输入成本价格"
                ></el-input>
              </el-form-item>
              <el-form-item label="大单位供货价:" prop="price1">
                <el-input
                  v-model="ruleForm2.price1"
                  style="width: 220px"
                  placeholder="请输入大单位供货价"
                ></el-input>
              </el-form-item>
              <el-form-item label="小单位供货价:" prop="price2">
                <el-input
                  v-model="ruleForm2.price2"
                  style="width: 220px"
                  placeholder="请输入小单位供货价"
                ></el-input>
              </el-form-item>
              <el-form-item label="保护价:">
                <el-input
                  v-model="ruleForm2.protect"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
              <el-form-item label="价格锁定:">
                <el-select v-model="ruleForm2.lockPrice">
                  <el-option label="是"></el-option>
                  <el-option label="否"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="one clear">
          <div class="one-left">
            <div id="u5">
              <img src="../../../assets/images/u5.png" />
              <div id="u5-text">
                <span style="font-family: '微软雅黑'; font-weight: 400"
                  >价格体系</span
                >
              </div>
            </div>
          </div>
          <div class="one-right">
            <el-form
              :inline="true"
              :model="ruleForm3"
              ref="ruleForm3"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="二批价:">
                <el-input
                  v-model="ruleForm3.twoPrice"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
              <el-form-item label="特通价:">
                <el-input
                  v-model="ruleForm3.especiallyPrice"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
              <el-form-item label="终端价:">
                <el-input
                  v-model="ruleForm3.terminalPrice"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
              <el-form-item label="商超价:">
                <el-input
                  v-model="ruleForm3.superPrice"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
              <el-form-item label="连锁超市:">
                <el-input
                  v-model="ruleForm3.supermarket"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
              <el-form-item label="A类店:">
                <el-input
                  v-model="ruleForm3.classA"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
              <el-form-item label="KA卖场:">
                <el-input v-model="ruleForm3.KA" style="width: 220px"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="two clear">
        <div class="two-left">
          <div id="u5">
            <img src="../../../assets/images/u5.png" />
            <div id="u5-text">
              <span style="font-family: '微软雅黑'; font-weight: 400"
                >商品相册</span
              >
            </div>
          </div>
        </div>
        <div class="two-right">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>

          <div class="two-btn">
            <el-button type="primary">上传</el-button>
          </div>
          <el-button type="primary" class="btn" @click="btn('ruleForm')"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {
  selsetTwoApi,
  addGoods,
  selectApi,
} from "@/http/commodity-management/informationApi";
export default {
  name: "GoodView",
  data() {
    return {
      rules: {
        factory: [
          { required: true, message: "请选择厂商名称", trigger: "blur" },
        ],
        brandName: [{ required: true, message: "请选择品牌", trigger: "blur" }],
        goodsType: [{ required: true, message: "请选择类型", trigger: "blur" }],
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      selected: [],
      selec: [],
      ruleForm: {
        factory: "",
        brand: "",
        type: "",
        name: "",
        describe: "",
        small: "",
       
      },
      ruleForm1:{
        bigUnit: "",
        norms: "",
      },
      ruleForm2:{
        costPrice:'',
         price1: "", //大单位供货价
        price2: "", //小单位供货价
        protect: "", //保护价
        lockPrice: "", //锁定价格
      },
      ruleForm3:{
         twoPrice: "", //二批价
        especiallyPrice: "", //特通价
        terminalPrice: "", //终端价
        superPrice: "", //商超价
        supermarket: "", //连锁超市
        classA: "", //A类店
        KA: "", //KA卖场
      },
      value: 10,
    };
  },
  methods: {
    selectSort() {
      //下拉框
      selsetTwoApi()
        .then((res) => {
          // console.log(res);
          this.selected = res.data.data;
        })
        .catch((err) => {
          console.log("获取失败", err);
        });

      selectApi()
        .then((res) => {
          console.log(res);
          this.selec = res.data.data;
        })
        .catch((err) => {
          console.log("获取失败", err);
        });
    },
    btn(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.$confirm("是否确认此次操作?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
          })
            .then(() => {
              // console.log("添加数据：", this.ruleForm);
              addGoods(this.ruleForm).then((res) => {
                console.log(res);
                this.$router.push({ path: "/goods/information" });
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              });
            })
            .catch((err) => {
              console.log("新增失败", err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  activated() {
    this.selectSort();
  },
};
</script>


<style scoped lang="scss">
.goods-warp {
  .two {
    .two-left {
      float: left;
      width: 25%;
      & #u5 {
        border-width: 0px;
        position: relative;
        left: 0px;
        top: 90px;
        width: 200px;
        height: 50px;
        font-size: 16px;
        color: #ffffff;
        text-align: left;

        & #u5-text {
          border-width: 0px;
          position: absolute;
          left: 20px;
          top: 14px;
          width: 178px;
          word-wrap: break-word;
        }
      }
    }
    .two-right {
      float: right;
      width: 75%;
      // border-left: 1px solid rgb(228, 228, 228);

      .two-btn {
        margin: 20px 0;
      }
      .btn {
        width: 150px;
      }
    }
  }
  .one {
    & .one-left {
      float: left;
      width: 25%;
      & #u5 {
        border-width: 0px;
        position: relative;
        left: 0px;
        top: 90px;
        width: 200px;
        height: 50px;
        font-size: 16px;
        color: #ffffff;
        text-align: left;

        & #u5-text {
          border-width: 0px;
          position: absolute;
          left: 20px;
          top: 14px;
          width: 178px;
          word-wrap: break-word;
        }
      }

      & #u5_img {
        border-width: 0px;
        left: 0px;
        top: 0px;
        width: 200px;
        height: 50px;
      }
    }
    & .one-right {
      float: right;
      width: 75%;
      border-left: 1px solid rgb(228, 228, 228);
    }
  }
}
</style>